<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单</title>
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/order.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
<!-- 公共头部 -->
<div id="commonHeader"></div>

<!-- 主体内容 -->
<div class="order-page">
    <!-- 订单搜索和筛选 -->
    <div class="order-header">
        <div class="search-box">
            <input type="text" placeholder="请输入订单号/商品名称">
            <button class="search-btn1">
                <i class="layui-icon layui-icon-search"></i>
                <span>搜索</span>
            </button>
        </div>
        <div class="date-filter">
            <span>下单时间：</span>
            <select>
                <option value="all">全部时间</option>
                <option value="一个月内">一个月内</option>
                <option value="三个月内">三个月内</option>
                <option value="半年内">半年内</option>
                <option value="一年内">一年内</option>
            </select>
        </div>
    </div>

    <!-- 订单状态筛选 -->
    <div class="order-filter">
        <div class="filter-item active">
            <span>全部订单</span>
            <span class="count">0</span>
        </div>
        <div class="filter-item">
            <span>待付款</span>
            <span class="badge">0</span>
        </div>
        <div class="filter-item">
            <span>待发货</span>
            <span class="badge">0</span>
        </div>
        <div class="filter-item">
            <span>待收货</span>
            <span class="badge">0</span>
        </div>
        <div class="filter-item">
            <span>已完成</span>
            <span class="count">0</span>
        </div>
        <div class="filter-item">
            <span>已取消</span>
            <span class="count">0</span>
        </div>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
        <!-- 订单内容将通过JavaScript动态生成 -->
    </div>

    <!-- 分页 -->
    <div class="pagination">
        <!-- 分页内容将通过JavaScript动态生成 -->
    </div>
</div>

<!-- 公共底部 -->
<div id="commonFooter"></div>

<!-- 登录弹窗 -->
<div id="mask" class="login-mask">
    <div class="login-popup">
        <div class="login-header">
            <h3>请先登录</h3>
            <span class="close-btn">&times;</span>
        </div>
        <div class="login-content">
            <p>您需要登录后才能查看订单信息</p>
            <div class="login-actions">
                <button class="btn-primary" onclick="window.location.href='./login.html?redirect='+encodeURIComponent(window.location.href)">立即登录</button>
                <button class="btn-default close-login">稍后再说</button>
            </div>
        </div>
    </div>
</div>

<!-- 物流信息样式 -->
<style>
.logistics-container {
    padding: 15px;
}
.logistics-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.logistics-timeline {
    position: relative;
    padding-left: 20px;
}
.logistics-timeline:before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #ddd;
}
.logistics-item {
    position: relative;
    padding: 10px 0;
    padding-left: 15px;
}
.logistics-item:before {
    content: '';
    position: absolute;
    left: -5px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #1E9FFF;
}
.logistics-item:first-child:before {
    background-color: #FF5722;
}
.logistics-time {
    color: #999;
    font-size: 12px;
    margin-bottom: 5px;
}
.logistics-info {
    color: #333;
}
.logistics-empty {
    text-align: center;
    padding: 30px 0;
    color: #999;
}
</style>

<script src="./layui/layui.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/auth.js"></script>
<script src="./js/api.js"></script>
<script src="./js/header.js"></script>
<script src="./js/common.js"></script>
<script src="./js/order.js"></script>
</body>
</html>